<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认表单</title>
    <style>
        .column1 {
            width: 20%;
        }
    </style>
    <script>
        function formCheck() {
            //用户名 必须含有大小写字母开头,必须含有数字,长度6到13位
            let reg = /^[a-zA-Z]\w{5,12}$/;
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            let flag = true;
            if (reg.test(username)) {
                document.getElementById("usernameMsg").innerHTML = "<span style='color: green'>✔用户名合法</span>";
            }else {
                document.getElementById("usernameMsg").innerHTML = "<span style='color: red'>✘用户名不合法</span>";
                flag = false;
            }
            //密码长度大于等于六位
            if (password.length >= 6) {
                document.getElementById("passwordMsg").innerHTML = "<span style='color: green'>✔密码名合法</span>";
            }else {
                document.getElementById("passwordMsg").innerHTML = "<span style='color: red'>✘密码名不合法</span>";
                flag = false;
            }
            return flag;
        }

    </script>
</head>
<!--需求分析:
		当用户填写完表单后,点击"提交"按钮时,对用户输入的信息,进行校验,校验失败时,显示对应的错误信息并不允许表单提交. 如果校验通过显示正确的提示信息,并表单提交.
技术分析:
		表单提交事件: onsubmit
        正则表达式:
		dom:
-->
<body>
<form action="https://www.baidu.com" onsubmit="return formCheck()">
    <table align="center">
        <tr>
            <td class="column1">用户名:</td>
            <td class="column2"><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
            <td id="usernameMsg"></td>
        </tr>
        <tr>
            <td class="column1">密码:</td>
            <td class="column2"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            <td id="passwordMsg"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input value="注册" type="submit"></td>
        </tr>
    </table>
</form>
</body>
</html>